<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>抱团员工端</title>
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui,viewport-fit=cover"/>
  <meta name="keywords" content="抱团">
  <meta name="description" content="抱团">
  <script type='text/javascript' src="../common/js/base.js" charset="UTF-8"></script>
  <link rel="stylesheet" type="text/css" href="../common/css/theme-chalk/index.css">
  <link rel="stylesheet" type="text/css" href="../common/css/animate.min.css">
  <link rel="stylesheet" type="text/css" href="../common/css/nanoscroller.css">
  <link rel="stylesheet" type="text/css" href="../common/css/swiper-bundle.min.css">
  <link rel="stylesheet" type="text/css" href="../common/css/base.css">
  <link rel="stylesheet" type="text/css" href="css/style_mobile.css">
  <script type='text/javascript' src="../common/js/jquery.min.js" charset="UTF-8"></script>
  <script type='text/javascript' src="../common/js/jquery.easing.js" charset="UTF-8"></script>
  <script type='text/javascript' src="../common/js/html2canvas.min.js" charset="UTF-8"></script>
  <script type="text/javascript" src="../common/js/layer/layer.js" charset="UTF-8"></script>
  <script type="text/javascript" src="../common/js/wow.js" charset="UTF-8"></script>
  <script type="text/javascript" src="../common/js/vue.js" charset="UTF-8"></script>
  <script type="text/javascript" src="../common/js/vue-resource.js" charset="UTF-8"></script>
  <script type="text/javascript" src="../common/js/axios.min.js" charset="UTF-8"></script>
  <script type='text/javascript' src="../common/js/elementui.min.js" charset="UTF-8"></script>
  <script type='text/javascript' src="../common/js/jquery.nanoscroller.js" charset="UTF-8"></script>
  <script type='text/javascript' src="../common/js/swiper.animate.min.js" charset="UTF-8"></script>
  <script type='text/javascript' src="../common/js/swiper-bundle.min.js" charset="UTF-8"></script>
  <script type='text/javascript' src="../common/js/helper.js" charset="UTF-8"></script>
</head>
<body>
<div class="page Earnings hasmenu" id="app">
  <div class="topNav">
    <div :class="{active:tab_index==1}" @click="tabChange(1)">暂存收益</div>
    <div :class="{active:tab_index==2}" @click="tabChange(2)">本月可结算收益</div>
    <div :class="{active:tab_index==3}" @click="tabChange(3)">已结算收益</div>
  </div>
  <!-- 暂存收益 -->
  <div v-if="tab_index==1">
    <div class="zctips">您目前有 <span>{{total_profit}}</span> 的暂存收益</div>
    <div class="mainBox zc">
      <div class="item" v-for="item in list">
        <div class="img yhafter">
          <img :src="item.product_image"/>
        </div>
        <div class="desBox">
          <div class="ovline">{{item.merchant}}</div>
          <div class="ovline2">{{item.product_title}}</div>
        </div>
        <div class="sy">
          <span>收益</span>
          <span>{{item.profit_amount}}</span>
        </div>
      </div>
    </div>
  </div>
  <!-- 暂存收益 -->
  <div v-if="tab_index==2">
    <div class="zctips">您目前有 <span>{{total_profit}}</span> 的可结算收益</div>
    <div class="mainBox zc">
      <div class="item" v-for="item in list">
        <div class="img yhafter">
          <img :src="item.product_image"/>
        </div>
        <div class="desBox">
          <div class="ovline">{{item.merchant}}</div>
          <div class="ovline2">{{item.product_title}}</div>
        </div>
        <div class="sy">
          <span>收益</span>
          <span>{{item.profit_amount}}</span>
        </div>
      </div>
    </div>
  </div>
  <!-- 已结算收益 -->
  <div v-if="tab_index == 3">
    <div class="zctips" v-if="settles.length === 0">没有结算记录</div>
    <div class="mainBox js" v-else>
      <div class="item" v-for="item in settles">
        <span>{{item.settle_time}}</span>
        <span>结算金额：<i>{{item.settle_amount}}</i></span>
      </div>
    </div>
  </div>

</div>
<div class="indexbotmenu">
    <a href="./userIndex.html" class="item">
        <div class="img"><img src="images/index-botmenu-ico1.png" alt=""></div>
        <p>首页</p>
    </a>
    <a href="./profits.html" class="item">
        <div class="img"><img src="images/index-botmenu-ico2-select.png" alt=""></div>
        <p>收益</p>
    </a>
<!--    <a href="./pc_add_active.html" class="item">-->
<!--        <div class="img"><img src="images/index-botmenu-ico3.png" alt=""></div>-->
<!--        <p>添加活动</p>-->
<!--    </a>-->
    <a href="./activity.html" class="item">
        <div class="img"><img src="images/index-botmenu-ico4.png" alt=""></div>
        <p>商家</p>
    </a>
</div>


</body>
<script>
  $(function () {
    new Vue({
      el: '#app',
      data() {
        return {
          tab_index: 1,
          total_profit: 0,
          list: [],
          settle_page: 1,
          settles: [],
        }
      },
      mounted() {
        wow = new WOW({
          animateClass: 'animated',
          offset: 0
        });
        wow.init();
        this.loadProfits()
      },
      methods: {
        tabChange: function (index) {
          this.tab_index = index
          if (this.tab_index === 1 || this.tab_index === 2) {
            this.loadProfits()
          }
          if (this.tab_index === 3) {
            this.loadSettles()
          }
        },
        loadProfits: function () {
          this.list = []
          let statusMap = {1: 'temp', 2: 'confirmed'}
            , status = statusMap[this.tab_index];
          employee_get('product_profits?status=' + status).then(res => {
            this.total_profit = res.total_profit
            this.list = res.list
          })
        },
        loadSettles: function () {
          employee_get('my_settles?page=' + this.settle_page).then(res => {
            return this.settles = res.list
          })
        },
      }
    });
  })
</script>
</html>
